<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			display: flex;
		}
		.list{
			width: 300px;
		}
		.main{
			width: 600px;
			border: 1px solid #333;
		}
		button{
			width: 100%;
			height: 50px;
		}
		li{
			list-style: none;
			width: 100px;
			height: 100px;
			border: 1px solid #333;
			box-sizing: border-box;
			line-height: 100px;
			text-align: center;
			float: left;
		}
		.active{
			background: red;
			color: #fff;
		}
	</style>
</head>
<body>
<div class="list">
	<h2>天选之子</h2>
</div>
<div class="main">
	<button>开始</button>
	<ul class="content">
	</ul>
</div>


<script type="text/javascript">
	let data = ["孙悟空", "唐僧", "猪八戒", "沙僧", "白龙马", "观音菩萨", "如来佛祖", "玉皇大帝", "太白金星", "牛魔王", "铁扇公主", "红孩儿", "二郎神", "哪吒", "托塔天王", "蜘蛛精", "白骨精", "金角大王", "银角大王"]

	let btn = document.querySelector('button')
	let content = document.querySelector('.content')
	let list = document.querySelector('.list')
	//定时器
	let time = null
	//随机数
	let index = null
	//将数据渲染到页面上
	function createLi() {
		content.innerHTML = ''
		for(let i = 0; i<data.length; i++){
			let newLi = document.createElement('li')
			newLi.innerText = data[i]
			content.appendChild(newLi)
		}
		if(document.querySelectorAll('li')[0]){
			document.querySelectorAll('li')[0].className = 'active'
		}
		
	}
	createLi()

	//绑定点击时间
	btn.onclick = function(){
		if(this.innerText == '开始'&& data.length > 0){
			if(index != null){
				data.splice(index,1)
				//重新渲染页面
				createLi()
			}
			prize()
			this.innerText = '结束'
		}else{
			clearInterval(time)
			this.innerText = '开始'
			let h2 = document.createElement('h2')
			h2.innerText = data[index]
			list.appendChild(h2)
		}
	}

	//封装抽奖方法
	function prize() {
		let lis = document.querySelectorAll('li')
		time = setInterval(function() {
			document.querySelector('.active').className  = ''
			index = parseInt(Math.random()*data.length)
			lis[index].className = 'active'
		},100)
	}
</script>
</body>
</html>